<template>
  <div>
<table border="1" style="border-collapse:collapse cellpadding:10px;"></table>
<caption>欢迎光临水果店</caption>
<tr>
  <!-- <th>苹果10￥/斤，折扣8折</th> -->
  <th>苹果￥{{money}}/斤，折扣{{number}}折</th>
</tr>
<tr>
  <td>请输入你要购买的斤数<input type="number" v-model.trim="catty"></td>
</tr>
<tr>
  <td><button@click="sumFn">结账买单</button>
  </td>
</tr>
<tr>
  <td>结账单：总价{{sum}}元 折后价：￥{{discount}}元 省了：￥{{save}}元 </td>
</tr>
  </div>
</template>

<script>
export default {
  data () {
    return {
      catty: '',
      sum: '',
      discount: '',
      save: '',
      number: '8',
      money: '10'
    }
  },

  methods: {
    sumFn () {
      if (this.catty === '') {
        return alert('请输入您要购买的斤数')
      }
      this.sum = this.catty * 10
      this.discount = this.sum * 0.8
      this.save = this.sum - this.discount
      this.catty = ''
    }
  }
}
</script>

<style scoped lang='less'>
table{
margin: 100px auto;
}
button{
  margin-left: 150px;
}
</style>
